<template>
	<view class="review-list-box">
		<view class="review-list-head">
			<text>评论</text><text>({{ props.CommentCount }})</text>
		</view>
		<view class="review-list-item" v-for="item in props.CommentsList" :key="item.ID" @click="hfFn(item)">
			<view class="review-list-item-head">
				<van-image fit="cover" position="left" :src="item.UserInfo.Avatar" />
			</view>
			<view class="review-list-item-head-right-list">
				<view class="review-list-item-head-right">
					<text class="review-list-item-head-name">{{ item.UserInfo.ShowName }}</text>
					<view @click="praiseSelectFn(item)">
						<Praise :itemData="item" />
					</view>
				</view>
				<view class="review-list-item-content">
					<text>{{ item.Text }}</text>
					<view class="review-list-item-content-time">
						{{ timerFn(item.AddTime) }}
					</view>
				</view>
				<view class="review-list-item review-list-item-reply" v-for="itemChild in item.Children">
					<view class="review-list-item-head">
						<van-image fit="cover" position="left" :src="itemChild.UserInfo.Avatar" />
					</view>
					<view class="review-list-item-head-right-list">
						<view class="review-list-item-head-right">
							<view class="review-list-item-head-name-box"><text class="review-list-item-head-name">{{
                                itemChild.UserInfo.ShowName }}</text>
								<!-- <text>作者</text></view> -->
								<view @click="praiseSelectFn(itemChild)">
									<Praise :itemData="item" />
								</view>
							</view>
							<view class="review-list-item-content">
								<text>{{ itemChild.Text }}</text>
								<view class="review-list-item-content-time">
									{{ timerFn(itemChild.AddTime) }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="review-bottom-box">
			<view class="send-input">
				<van-field v-model="state.value" :placeholder="state.placeholderValue" />
				<view class="send-btn" @click="sendFn">发送</view>
			</view>
			<view class="chat-box" v-if="props.isChat" @click="privateChatFn()"><img src="@/assets/image/icon15.png"
					alt="">
			</view>
			<ReviewGift :userImId="props.userInfo.IMId" @successActionGift="successActionGift" />
			<Praise :itemData="trendMessage" @tap="tapPraise" />
			<!-- props.trendMessage -->
		</view>
		<AuthPup :types="2" ref="AuthPupRef">
			<template #auth>
				<OpenMember :curIndex="state.curIndex" />
			</template>
		</AuthPup>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		ref
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import Ident from "@/pages/home/components/ident/index.vue"
	import ReviewGift from "@/pages/home/components/reviewGift/index.vue"
	import Praise from "@/pages/home/components/praise/index.vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		timer
	} from "@/utils/tool"
	import Attestation from "@/components/authPup/components/unlockAccount.vue" // 社交账号
	let {
		proxy
	} = getCurrentInstance()

	import {
		UserExpandState,
		sendComent, // 发送评论
		sendComentZan, // 评论点赞
	} from "@/api/list/index"

	const successActionGift = () => {

	}

	const props = defineProps({
		isChat: {
			type: Boolean,
			default: false
		},
		stateId: {
			type: Number,
			default: 0
		},
		CommentsList: {
			type: Array,
			default: () => []
		},
		CommentCount: {
			type: Number,
			default: 0
		},
		userInfo: {
			type: Object,
			default: () => {
				return {
					IMId: null
				}
			}
		},
		trendMessage: {
			type: Object,
		}
	})

	const emits = defineEmits(['praiseSelectChange', 'sendComentSuccess'])

	const state = reactive({
		show: false,
		value: '',
		curIndex: 1, // 1 需要开通会员
		placeholderValue: "留下你的足迹",
		hfUserId: ""
	})

	const hfFn = (item) => {
		state.hfUserId = item.ID
		state.placeholderValue = '回复: ' + item.UserInfo.ShowName
	}

	const sendComentFn = async () => {
		let toUserId = props.stateId
		let text = state.value
		let userId = getAuthorization('userId')
		let hfUserId = state.hfUserId ? state.hfUserId : 0
		let msg = state.hfUserId == 0 ? '评论成功' : '回复成功'
		let data = await proxy.$post(sendComent(toUserId, text, userId, hfUserId))
		if (data.code == 200) {
			data.data.UserInfo = JSON.parse(getAuthorization('userInfo'))
			if (state.hfUserId != 0) {
				emits('sendComentSuccessHf')

			} else {
				emits('sendComentSuccess', data.data)
			}
			uni.showToast({
				title: msg,
				icon: "none"
			})
			state.value = ""
		}
	}

	const timerFn = (num) => {
		let yM = num ? num.split(' ')[0].split('-') : ""
		return yM ? yM[1] + '月' + yM[2] + '日' : ''
	}

	// 评论点赞
	const sendComentZanFn = async (params) => {
		let toUserId = params.ID
		let userId = getAuthorization('userId')
		let data = await proxy.$post(sendComentZan(toUserId, userId))
		uni.showToast({
			title: '点赞成功',
			icon: "none"
		})
		emits("praiseSelectChange", params)
	}

	const praiseSelectFn = (params) => {
		sendComentZanFn(params)
	}


	onLoad((options) => {})

	const getUserExpandState = async (id) => {
		let data = await proxy.$get(UserExpandState)
		if (data.code == 200) {
			sendComentFn()
		}
	}

	const reviewFn = () => {
		state.show = true
	}

	const privateChatFn = () => {
		uni.navigateTo({
			url: '/pages/privateChat/index'
		})
	}

	let AuthPupRef = ref(null)
	import {
		Toast
	} from 'vant';
	const sendFn = () => {
		let userInfo = JSON.parse(getAuthorization("userInfo"))
		if (state.value == "") {
			Toast('请输入评论内容')
			return
		}
		if (userInfo.VipState == 0) {
			let sex = userInfo.Sex
			state.curIndex = sex == 0 ? '1' : '6'
			AuthPupRef.value.squareFn()
			return
		} else {
			getUserExpandState()
		}
	}

	const TrendUnLockSuccess = () => {
		AuthPupRef.value.squareHideFn()
		getUserExpandState()
	}

	// 点赞or取消点赞
	const tapPraise = async () => {
		let userInfo = JSON.parse(getAuthorization("userInfo"));
		if (props.trendMessage.IsLike) {
			let data = await proxy.$del(
				`/app/api/G/user-heibai/v1/Trend/${props.trendMessage.ID}/LikeOrStep?userId=${userInfo.ID}&likeType=0`
			);
			props.trendMessage.LikeCount--;
			props.trendMessage.IsLike = false;
		} else {
			let data = await proxy.$post(
				`/app/api/G/user-heibai/v1/Trend/${props.trendMessage.ID}/LikeOrStep?userId=${userInfo.ID}&likeType=0`
			);
			props.trendMessage.LikeCount++;
			props.trendMessage.IsLike = true;
		}
	}

	defineExpose({
		reviewFn
	})
</script>

<style lang="scss" scoped>
	.review-list-box {
		padding-bottom: 120rpx;

		.review-list-head {
			font-size: 36rpx;
			padding: 30rpx 20rpx;

			text:nth-child(2) {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}

		.review-list-item {
			display: flex;
			padding: 0 0 20rpx 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #EDEDED;

			.review-list-item-head {
				width: 76rpx;
				flex: none;

				.van-image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 76rpx;
					overflow: hidden;
				}
			}

			.review-list-item-head-right-list {
				width: 100%;

				.review-list-item-head-right {
					display: flex;
					width: 100%;
					justify-content: space-between;
					padding: 0 20rpx;
					box-sizing: border-box;

					.review-list-item-head-name {
						font-size: 26rpx;
						color: #939191;
					}

					.praise-box {
						display: flex;
						align-items: center;

						img {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							font-size: 24rpx;
							margin-left: 10rpx;
							color: #999;
						}
					}

				}

				.review-list-item-content {
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #262626
				}

				.review-list-item-content-time {
					font-size: 20rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}

		}

		.review-list-item-reply {
			border-bottom: none;
			margin-top: 20rpx;

			.review-list-item-head {
				width: 48rpx;

				.van-image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.review-list-item-head-name-box {
				text:nth-child(2) {
					background-color: #E8E8E8;
					color: #999;
					font-size: 24rpx;
					padding: 2rpx 5rpx;
					margin-left: 8rpx;
					display: inline-block;
				}
			}
		}
	}

	.review-bottom-box {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;

		.send-input {
			display: flex;
			align-items: center;

			.send-btn {
				flex: none;
				margin-left: 10rpx;
			}
		}

		.van-field {
			border: none;
			background: #F4F4F4;
			border-radius: 100rpx;
			padding: 0 30rpx;
			height: 80rpx;
			line-height: 80rpx;

			:deep(.van-field__control) {
				font-size: 32rpx;
			}
		}
	}

	.chat-box {
		width: 48rpx;
		margin: 0 20rpx;
		display: flex;
		align-items: center;

		img {
			width: 48rpx;
		}
	}

	:deep(.van-popup) {
		background: none !important;
	}
</style>
